<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置模型</title>
    <link rel="stylesheet" href="/backend/plugins/element-ui/index.css">
    <style>
        body {
            margin: auto;
            background-color: #030212;
        }

        .el-header {
            background-image: url('/backend/images/TopImg.png'); /* 替换为你的图片路径 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
            background-repeat: no-repeat; /* 背景图片不重复 */
        }

        .devices {
            box-sizing: border-box;
            border: 1px solid #85836b;
            border-radius: 3px;
            display: flex;
        }

        .main {
            min-height: 85vh;
        }

        .statistics {
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中，如需 */
        }

        .imgList {
            align-items: center;
        }

        .imgItem {
            margin: 5px;
            background-color: #666464;
            align-items: center;
            z-index: 10;
            /* 垂直并排居中显示 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .pic {
            margin-top: 1px;
            margin-left: 1px;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 100vh; text-align: center;">
        <el-header height="8vh" style="display: flex;justify-content: center;align-items: center;">
            <div class="title" style="display: flex;justify-content: center;align-items: center;">
                <div style="height: 8vh;">
                    <img :src="logoPath" style="height: 8vh;">
                </div>
                <div>
                    <strong style="color: aliceblue; font-size: 4vh;">{{line}}设备模型设置</strong>
                </div>
            </div>
        </el-header>
        <el-main>
            <el-row>
                <el-col :span="16">
                    <div class="main devices" id="main">
                        <img v-for="(item , index) in imgList" :id="item.id" :src="item.src" class="pic"
                             :style="item.style" v-drag @wheel="handleWheel" @mouseenter="getMouseTarget"
                             @mouseleave="removeMouseTarget"/>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="main statistics" style="text-align: center;">
                        <el-row>
                            <el-col :span="24">
                                <label style="color: aliceblue;">生产线:</label>
                                <el-select v-model="line" placeholder="请选择" size="small" @change="handleSelect">
                                    <el-option
                                            v-for="item in lines"
                                            :key="item.lineName"
                                            :label="item.lineName"
                                            :value="item.lineName">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="24" style="margin-top: 2vh;">
                                <el-button type="primary" plain size="large" icon="el-icon-plus" @click="handleAddImg">
                                    添加
                                </el-button>
                                <el-button type="success" plain size="large" icon="el-icon-check" @click="handleSave">
                                    保存
                                </el-button>
                                <el-button type="warning" plain size="large" icon="el-icon-setting" @click="gotoSetPositions">设置站点</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
    <div>
        <el-dialog title="添加模型"
            :visible.sync="dialogVisible"
            width="75%"
            center>
            <el-scrollbar style="height: 400px;">
                <el-row v-for="(images,index) in moduleImages" :key="index" class="imgList" type="flex" justify="center" align="bottom">
                    <el-col v-for="(item,index) in images" :key="index" :span="4" style="text-align: center;">
                        <span class="imgItem">
                            <span style="color: aliceblue;">{{item.imageName}}</span>
                            <span><img :src="item.path" style="height: 110px;"></span>
                            <span>
                                <el-button type="text" icon="el-icon-plus"
                                   @click="addImg(item.path)"
                                   style="color: rgb(242, 243, 174);">
                                    添加模型
                                </el-button>
                            </span>
                        </span>
                    </el-col>
                </el-row>
            </el-scrollbar>
        </el-dialog>
    </div>
</div>
<script src="/backend/plugins/vue/vue.js"></script>
<script src="/backend/plugins/axios/axios.js"></script>
<script src="/backend/js/getParam.js"></script>
<script src="/backend/plugins/element-ui/index.js"></script>
<script>
    Vue.directive('drag', (el) => {
        const oDiv = el // 当前元素
        oDiv.onmousedown = (e) => {
            let target = oDiv
            while (
                window.getComputedStyle(target).position !== 'absolute' &&
                target !== document.body
                ) {
                target = target.parentElement
            }
            let parent = target.parentNode
            document.onselectstart = () => {
                return false
            }
            if (!target.getAttribute('init_x')) {
                target.setAttribute('init_x', target.offsetLeft)
                target.setAttribute('init_y', target.offsetTop)
            }
            // e.clientX, e.clientY是鼠标点击的位置
            // target.offsetLeft, target.offsetTop是当前元素左上角的位置
            // 计算鼠标按下的位置距离当前元素左上角的距离
            const disX = e.clientX - target.offsetLeft
            const disY = e.clientY - target.offsetTop
            // target.clientWidth, target.clientHeight是当前元素的尺寸
            // parent.clientWidth, parent.clientHeight是父元素的尺寸
            // parent.offsetLeft, parent.offsetTop是父元素左上角的位置
            // 可移动范围的位置
            const minX = parent.offsetLeft + 2
            const maxX = parent.offsetLeft + parent.clientWidth - target.clientWidth - 2
            const minY = parent.offsetTop + 2
            const maxY = parent.offsetTop + parent.clientHeight - target.clientHeight - 2
            document.onmousemove = (e) => {
                // 通过事件委托，计算移动的距离,e是最新的鼠标位置，disX、disY是鼠标刚点击时的位置
                let l = e.clientX - disX
                let t = e.clientY - disY
                // 约束移动范围在父元素区域内
                if (l < minX) {
                    l = minX
                } else if (l > maxX) {
                    l = maxX
                }
                if (t < minY) {
                    t = minY
                } else if (t > maxY) {
                    t = maxY
                }
                // 给当前元素样式中的left和top赋值
                target.style.left = l + 'px'
                target.style.top = t + 'px'
            }
            document.onmouseup = (e) => {
                document.onmousemove = null
                document.onmouseup = null
                document.onselectstart = null
            }
            // 不return false的话，可能导致鼠标黏连，鼠标粘在dom上拿不下来，相当于onmouseup失效
            return false
        }
    });
    var vue = new Vue({
        el: '#app',
        data: {
            scaleStep: 0.01, // 缩放系数
            tempWith: null,
            tempHeight: null,
            targetDomId: null,
            imgList: [],
            lines: [],
            line: null,
            dialogVisible: false,
            activeName: "Device_Module",
            moduleImages : [],
            logoPath: null
        },
        created() {
            axios.get("/line/listAll").then((res) => {
                this.lines = res.data.data;
            });
            let queryParam = getQueryParam("line");
            if (queryParam !== null && queryParam !== '') {
                this.line = queryParam;
            }
            axios.get("/line/getLogoPath").then((res) => {
                this.logoPath = res.data;
            });
            if (this.line !== null && this.line !== '') {
                axios.get("/line/getModule?lineName=" + this.line).then((res) => {
                    if (res.data.code === 0) {
                        this.imgList = res.data.data;
                    }
                });
            }else{
                this.$message.error("您还未选择任何要设置的生产线！！");
            }
            // 模型图片应该从哪里加载 ，是否应该让用户可以自主上传
        },
        mounted() {
            // 在mounted钩子中添加事件监听
            window.addEventListener('keydown', this.handleDeleteKey);
        },
        beforeDestroy() {
            // 在组件销毁前移除事件监听
            window.removeEventListener('keydown', this.handleDeleteKey);
        },
        methods: {
            handleSelect(value) {
                window.location.href = "/backend/page/line/setModule.html?line=" + value;
            },
            handleAddImg() {
                if (this.line === null || this.line === '') {
                    this.$message.error("您还未选择任何要设置的生产线！！");
                } else {
                    axios.get("/line/getModuleImages").then((res)=>{
                       this.moduleImages = res.data.data;
                    });
                    this.dialogVisible = true;
                }
            },
            handleSave() {
                const dom = document.getElementById("main");
                console.log(dom);
                axios.post("/line/saveModule", {
                    lineName: this.line,
                    dom: dom.outerHTML // 模型的标签 html
                }).then((res) => {
                    if (res.data.code === 0) {
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                    }
                });
            },
            // 鼠标移入时
            getMouseTarget(event) {
                if (event.target.style.height !== '') {
                    this.tempWith = event.target.offsetWidth;
                    this.tempHeight = event.target.offsetHeight;
                } else {
                    this.tempWith = event.target.naturalWidth;
                    this.tempHeight = event.target.naturalHeight;
                }
                this.targetDomId = event.target.id;
            },
            // 鼠标离开时
            removeMouseTarget(event) {
                this.tempWith = null;
                this.tempHeight = null;
                this.targetDomId = null;
                this.maxWidth = null;
                this.minWidth = null;
            },
            // 鼠标滚轮滚动时触发
            handleWheel(event) {
                if (
                    (this.tempHeight / 100) >= 0.5
                    && (this.tempHeight / 100) <= 2) {
                    if (event.deltaY < 0) {
                        // 向上滚动，增大图片
                        this.tempWith = this.tempWith * (1 + this.scaleStep);
                        this.tempHeight = this.tempHeight * (1 + this.scaleStep);
                    } else {
                        // 向下滚动，减小图片
                        this.tempWith = this.tempWith * (1 - this.scaleStep);
                        this.tempHeight = this.tempHeight * (1 - this.scaleStep);
                    }
                } else if (this.tempHeight / 100 < 0.5) {
                    this.tempWith = 50 * (event.target.naturalWidth / event.target.naturalHeight);
                    this.tempHeight = 50;
                } else {
                    this.tempWith = 200 * (event.target.naturalWidth / event.target.naturalHeight);

                    this.tempHeight = 200;
                }
                event.target.style.width = this.tempWith + "px";
                event.target.style.height = this.tempHeight + "px";
                // 为了防止页面滚动，取消事件默认行为
                event.preventDefault();
            },
            handleDeleteKey(event) {
                // 检查按下的是否是删除键（Delete）
                if (event.key === 'Delete') {
                    // 这里处理删除键的逻辑
                    if (this.targetDomId !== null) {
                        document.getElementById(this.targetDomId).remove();
                        this.tempWith = null;
                        this.tempHeight = null;
                        this.targetDomId = null;
                    }
                }
            },
            addImg(path) {
                if (this.line === null && this.line === '') {
                    this.$message.error("您还未选择任何要设置的生产线！！");
                } else {
                    const timestamp = new Date().getTime();
                    this.imgList.push({
                        id: "" + timestamp,
                        src: path,
                        style: "height: 100px;"
                    });
                    this.dialogVisible = false;
                }
            },
            gotoSetPositions(){
                window.location.href = "/backend/page/line/setPositions.html?line=" + this.line;
            },
        }
    });
</script>
</body>
</html>